<template>
  <div class="subnav">
    <ul class="navbar">
      <li>
        <a
          data-act="subnav-click"
          data-val="{subnavClick:1}"
          data-state-val="{subnavId:1}"
          :class="showIndex === '1'||showIndex === undefined ?'active':''"
          href="?showType=1"
          >正在热映</a
        >
      </li>
      <li>
        <a data-act="subnav-click" href="?showType=2" :class="showIndex === '2' ?'active':''"
          >即将上映</a
        >
      </li>
      <li>
        <a data-act="subnav-click" href="?showType=3" :class="showIndex === '3' ?'active':''"
          >经典影片</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TtmsCenter',
  data () {
    return {}
  },
  computed: {
    showIndex () {
      return this.$route.query.showType
    }
  },

  mounted () {
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.subnav {
    background-color: #47464a;
    height: 60px;
    width: 100%;
    min-width: 1200px;
    text-align: center;
}
.subnav .navbar {
    display: inline-block;
    overflow: hidden;
}
.subnav li, .subnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.subnav .navbar li {
    display: inline-block;
    float: left;
}
.subnav .navbar li .active {
    color: #ef4238;
    position: relative;
    cursor: default;
}
.subnav .navbar li a {
    display: block;
    font-size: 16px;
    color: #999;
    height: 60px;
    line-height: 60px;
    padding: 0 40px;
}
a {
    text-decoration: none;
}
.subnav .navbar li .active:before {
    content: "";
    width: 2px;
    height: 0;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: 53px;
    border-bottom: 7px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: none;
}
</style>
